/**
 * useId
 *
 *    语法：
 *      const id = useId()
 *        1. id 是唯一的。
 *
 *    作用：
 *      一般是给到元素设置 id 属性时玩。
 *
 *
 *    案例：
 *      实现一个 baseInput 组件
 *        <BaseInput label="用户名" type="text" />
 *        且要实现 label 点击。让 对应的 input 获取焦点
 *
 *
 *
 */

import { useState, useDebugValue, useId } from "react";

function BaseInput({ label, ...props }) {
  const id = useId();
  console.log(id);

  return (
    <div>
      <label htmlFor={id}>{label}</label>
      {/* 下面input会出现 label="xxx", 如何将不需要的label给去掉呢？ */}
      <input id={id} {...props} />
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>App</h1>
      <BaseInput label="用户名" type="text" readOnly />

      <BaseInput label="密码" type="password" disabled />

      <BaseInput
        label="手机号"
        maxLength="11"
        onChange={() => {
          console.log("onChange");
        }}
      />
    </div>
  );
}

export default App;
